<template>
  <div class="basic-container">
    <item-box title="资源分析">
      <template #content>
        <div class="content-warp">
          <div class="btns">
            <div
              :class="index === 1 ? 'btn-active' : 'btn'"
              @click="() => (index = 1)"
            >
              照明能耗分析
            </div>
            <div
              :class="index === 2 ? 'btn-active' : 'btn'"
              @click="() => (index = 2)"
            >
              电桩充电分析
            </div>
          </div>

          <div v-if="index === 1" class="chart-box">
            <line-chart id="linechart111" title="耗电量"></line-chart>
          </div>
          <div v-if="index === 2" class="chart-box">
            <line-chart id="linechart222" title="电量"></line-chart>
          </div>
        </div>
      </template>
    </item-box>
  </div>
</template>

<script setup>
import ItemBox from '../ItemBox/index.vue'
import LineChart from './LineChart.vue'
import { ref } from 'vue'
const index = ref(1)
</script>

<style lang="scss" scoped>
.basic-container {
  width: 100%;
  height: 100%;
  .content-warp {
    width: 100%;
    height: 100%;
    position: relative;
    .btns {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: center;
      column-gap: 10%;
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-style: italic;
      color: #e1dfdc;
      .btn {
        width: 117px;
        height: 36px;
        background: url(~@@/images/screen/btn_def_bg.png) no-repeat;
        background-size: 100% 100%;
        color: rgba(229, 169, 53, 0.5);
        text-align: center;
        line-height: 36px;
        cursor: pointer;
      }
      .btn-active {
        width: 117px;
        height: 36px;
        background: url(~@@/images/screen/btn_act_bg.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
      }
    }
    .chart-box {
      width: calc(100% - 20px);
      height: calc(100% - 66px - 40px);
      margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 20px;
    }
  }
}
</style>
